<template>
    <input
        type="file"
        accept="image/*"
        @change="onChange"
        id="fileBtn"
        style="display: none"
    />
    <!-- <el-button @click="uploadClick">图片上传</el-button> -->
    <div style="cursor: pointer" @click="uploadClick"><slot></slot></div>
    <el-dialog
        v-model="dialogVisible"
        title="图片裁剪"
        width="50%"
        :before-close="
            () => {
                dialogVisible = false;
            }
        "
    >
        <div style="width: 100%; height: 50vh">
            <vueCropper
                ref="cropperRef"
                :img="options.img"
                :info="true"
                :infoTrue="options.infoTrue"
                :auto-crop="options.autoCrop"
                :fixed-box="options.fixedBox"
                :fixedNumber="options.fixedNumber"
                :fixed="options.fixed"
                :centerBox="options.centerBox"
                @realTime="realTime"
            ></vueCropper>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="" @click="refreshCrop">重置</el-button>
                <el-button type="primary" @click="finish">确认</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 裁剪的内容 -->
    <!-- <div :style="previews.div" style="float: left">
      <div v-html="previews.html"></div>
    </div> -->
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import VueCropper from 'vue-cropper/src/vue-cropper.vue';
const props = defineProps(['width', 'height', 'fixedNumber']);
const emit = defineEmits(['change']);
interface Options {
    img: string | ArrayBuffer | null; // 裁剪图片的地址
    info: true; // 裁剪框的大小信息
    outputSize: number; // 裁剪生成图片的质量 [1至0.1]
    outputType: 'jpeg'; // 裁剪生成图片的格式
    canScale: boolean; // 图片是否允许滚轮缩放
    autoCrop: boolean; // 是否默认生成截图框
    autoCropWidth: number; // 默认生成截图框宽度
    autoCropHeight: number; // 默认生成截图框高度
    fixedBox: boolean; // 固定截图框大小 不允许改变
    fixed: boolean; // 是否开启截图框宽高固定比例
    fixedNumber: Array<number>; // 截图框的宽高比例  需要配合centerBox一起使用才能生效
    full: boolean; // 是否输出原图比例的截图
    canMoveBox: boolean; // 截图框能否拖动
    original: boolean; // 上传图片按照原始比例渲染
    centerBox: boolean; // 截图框是否被限制在图片里面
    infoTrue: boolean; // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
}

const options: Options = reactive({
    img: '', // 需要剪裁的图片
    autoCrop: true, // 是否默认生成截图框
    autoCropWidth: props.width || 100, // 默认生成截图框的宽度
    autoCropHeight: props.height || 100, // 默认生成截图框的长度
    fixedBox: false, // 是否固定截图框的大小 不允许改变
    info: true, // 裁剪框的大小信息
    outputSize: 0.6, // 裁剪生成图片的质量 [1至0.1]
    outputType: 'jpeg', // 裁剪生成图片的格式
    canScale: false, // 图片是否允许滚轮缩放
    fixed: true, // 是否开启截图框宽高固定比例
    fixedNumber: props.fixedNumber || [3, 1], // 截图框的宽高比例 需要配合centerBox一起使用才能生效
    full: true, // 是否输出原图比例的截图
    canMoveBox: false, // 截图框能否拖动
    original: false, // 上传图片按照原始比例渲染
    centerBox: true, // 截图框是否被限制在图片里面
    infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
});
const previews: any = ref({});
let fileItem = reactive({});
const cropperRef: any = ref({});
const dialogVisible = ref(false);
// 触发点击事件
const uploadClick = () => {
    document.getElementById('fileBtn')?.click();
};
const onChange = (e: any) => {
    const file = e.target.files[0];
    fileItem = file;
    console.log('file:', file);
    const URL = window.URL || window.webkitURL;
    options.img = URL.createObjectURL(file);
    console.log('options.img:', options.img);
    dialogVisible.value = true;
};
const refreshCrop = () => {
    cropperRef.value.refresh();
};
// 上传图片（点击保存按钮）
const finish = () => {
    cropperRef.value.getCropData((data: any) => {
        emit('change', data);
    });

    dialogVisible.value = false;
};
// 裁剪之后的数据
const realTime = (data: any) => {
    // console.log("realTime:", data);
    previews.value = data;
};
</script>
